<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2022-02-04 19:16:41
 * @LastEditors: GGB
 * @LastEditTime: 2022-02-05 12:23:28
-->
<template>
    <div class="layout" :class="{ hidden: isFullScreen }">
        <img class="logo" src="../assets/logo.png" />
        <a-input-search
            v-model:value="keyword"
            placeholder="input search text"
            class="search"
            @search="onSearch"
        />
        <a-menu v-model:selectedKey="current" mode="horizontal">
            <a-menu-item key="help">
                <template #icon>
                    <question-circle-outlined />
                </template>
                帮助
            </a-menu-item>
            <a-menu-item key="store">
                <template #icon>
                    <shop-outlined />
                </template>
                门店
            </a-menu-item>
            <a-sub-menu key="account">
                <template #icon>
                    <user-outlined />
                </template>
                <template #title>账户</template>
                <a-menu-item key="setting:2">余额</a-menu-item>
                <a-menu-item key="setting:1">退出登录</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="cart">
                <template #icon>
                    <car-outlined />
                </template>
                <template #title>购物车</template>
                <a-menu-item-group title="购物车商品">
                    <a-menu-item v-for="item, i in buycarts" :key="item.id">
                        <div class="prod-item">
                            <img :src="item.imgsrc" alt />
                            <div class="middle">
                                <div class="title">{{ item.title }}</div>
                                <div class="content">
                                    <span class="num">数量：{{ item.num }}</span>
                                    <div class="control" @click.stop>
                                        <span class="btn" @click="store.addBuycartNum(i)">+</span>
                                        <span class="btn" @click="store.reduceBuycartNum(i)">-</span>
                                    </div>
                                </div>
                            </div>
                            <div class="price">￥{{ item.price * item.num }}</div>
                        </div>
                    </a-menu-item>
                    <a-menu-item v-if="buycarts.length" key="totalPrice">
                        <div class="total">
                            总价：
                            <span class="price">￥{{ store.totalPrice }}</span>
                        </div>
                    </a-menu-item>
                    <a-menu-item v-else key="empty">
                        <a-empty description="暂无商品" :image="simpleImage" />
                    </a-menu-item>
                </a-menu-item-group>
            </a-sub-menu>
        </a-menu>
    </div>
</template>
<script setup>
import { ref } from "vue"
import {
    ShopOutlined,
    UserOutlined,
    CarOutlined,
    QuestionCircleOutlined,
} from '@ant-design/icons-vue';
import { useStore } from '@s/index'
import { storeToRefs } from 'pinia'
import { Empty } from 'ant-design-vue';
const store = useStore()
const { isFullScreen, buycarts } = storeToRefs(store)
const current = ref('')
const keyword = ref('')
const onSearch = () => {
    console.log(keyword.value)
}
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE

const changeBuyCartNum = (item, i) => {
    buycarts.value[i].num = item.num
}


</script>

<style scoped lang="less">
.layout {
    z-index: 9999999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 46px;
    padding: 0 20px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: fixed;
    width: 100%;
    transition: all 0.5s;
    .logo {
        width: 32px;
        height: 32px;
        background: #fff;
        border-radius: 4px;
        margin-right: 20px;
    }
    .search {
        flex: 1;
        height: 32px;
        border-radius: 4px;
        margin-right: 20px;
    }
    &.hidden {
        transform: translate(0, -100%);
    }
}
</style>
<style>
.ant-menu-submenu {
    z-index: 10000000 !important;
}
.ant-menu-sub .ant-menu-item {
    height: auto;
}
.ant-menu-sub .ant-menu-item .prod-item {
    display: flex;
    width: 400px;
    justify-content: space-between;
}
.ant-menu-sub .ant-menu-item .middle {
    display: flex;
    width: 220px;
    height: 100px;
    flex-direction: column;
    justify-content: space-between;
}
.ant-menu-sub .ant-menu-item .title {
    font-size: 16px;
    font-weight: 900;
}
.ant-menu-sub .ant-menu-item .price {
    font-size: 16px;
    font-weight: 900;
    color: orange;
    display: flex;
    /* align-items: center; */
    justify-content: center;
}
.ant-menu-sub .ant-menu-item .content {
    display: flex;
    justify-content: space-between;
}
.ant-menu-sub .ant-menu-item .btn {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #ccc;
    margin: 0 5px;
}
.ant-menu .prod-item img {
    width: 100px;
    height: 100px;
}
.ant-menu-sub .ant-menu-item .total {
    font-size: 900;
    display: flex;
    justify-content: flex-end;
    font-size: 16px;
}
.ant-menu-sub .ant-menu-item .total .price {
    color: red;
    padding-right: 20px;
}
</style>
